<template>
  <div class="detail">
    <!-- 顶部 -->
    <div class="header">
      <!-- 顶部按钮 -->
      <van-nav-bar title="详情页" @click-left="onClickLeft">
        <template #right>
          <!-- 弹出按钮 -->
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            theme="dark"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="25" color="black" />
            </template>
          </van-popover>
        </template>

        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 轮播 -->
    <div class="container">
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(item, index) in BannerList" :key="index">
          <img :src="item" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
      <!-- 详情页数据 -->
      <div class="price">
        <p>￥{{ price }}</p>
      </div>
      <div class="title">
        <h4>{{ title }}</h4>
      </div>
    </div>
    <!-- 底部收藏加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart"/>
      <van-goods-action-icon icon="star" text="收藏" color="#ff5000" @click="addCollec(proid)"/>   
      <!-- color="#ff5000" -->
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart(proid)"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="buy"/>
    </van-goods-action>
    <!-- 分享 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect1"
    />
  </div>
</template>

<script>
import { getBannerList,getAddOrdList } from "../../api/detail";
import { getCartList } from "../../api/cart";
import Vue from "vue";
import {
  NavBar,
  Popover,
  ShareSheet,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Toast,
} from "vant";

Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionIcon);
Vue.use(GoodsActionButton);
Vue.use(Toast);
export default {
  data() {
    return {
      BannerList: [],
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      price: 0,
      title: "",
      current: 0,
      proid: "",
      num: "1",
      userid: "",
    };
  },
  created() {
    getBannerList(this.$route.params.proid).then((data) => {
      this.BannerList = data.data.data.banners[0].split(",");
      // console.log(data.data.data);
      this.price = data.data.data.originprice;
      this.title = data.data.data.proname;
      this.proid = data.data.data.proid;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
    onChange(index) {
      this.current = index;
    },
    addCart(proid) {
      if (!localStorage.getItem("token")) {
        this.$router.push("/Login");
      } else {
        // 调用接口加入购物车
        let data = {
          userid: localStorage.getItem("userid"),proid,num: this.num,};
        // console.log(data);
        getCartList(data).then((res) => {
          console.log(res);
          if(res.data.code=='200'){
            Toast("加入购物车成功")
          }
        });
      }
    },
    addCollec(proid) {
      if (!localStorage.getItem("token")) {
        this.$router.push("/Login");
      } else {
        // 调用接口加入购物车
        let data = {
          userid: localStorage.getItem("userid"),proid,num: this.num,};
        // console.log(data);
        getCartList(data).then((res) => {
          console.log(res);
          if(res.data.code=='200'){
            Toast("收藏成功")
          }
        });
      }
    },
    toCart(){
       this.$router.push("/Cart");
    },
    buy(){
      getAddOrdList({userid:localStorage.getItem("userid")}).then((res)=>{
        console.log(res);
      })
    }
  },
};
</script>

<style scoped>
.container {
  height: 2.5rem;
  width: 100%;
}
.container img {
  width: 100%;
}
.price p {
  padding-left: 0.1rem;
  padding-top: 0.1rem;
  color: red;
}
.title h4 {
  color: #434343;
  padding: 0.1rem;
}
.custom-indicator {
  position: absolute;
  right: 0px;
  bottom: 25px;
  padding: 4px 10px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 45% 0 0 45%;
}
</style>